<template>
    <base-dialog v-bind="$attrs" v-on="$listeners" title="请选择上门时间" @submit="submit" width="600px">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="auto" class=""
                 label-position="left">

            <el-form-item label="上门时间"  prop="date">
                <el-date-picker
                        v-model="formData.date"
                        align="right"
                        value-format="yyyy-MM-dd"
                        type="date"
                        style="width: 100%"
                        :picker-options="pickerOptions"
                        placeholder="开始日期" @change="getVenuesTimesDetail">
                </el-date-picker>
            </el-form-item>
            <template v-if="formData.date">
                <el-form-item label="预约时段" prop="currTime">
                    <el-radio-group v-model="formData.currTime" size="mini" class="dateRadio" @change="setEndTime">
                        <el-radio :label="item.name" border v-for="(item, index) in timeList" :key="index">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </template>
        </el-form>

    </base-dialog>
</template>
<script>
    import BaseDialog from "@/components/Common/BaseDialog";

    export default {
        name: "CalendarAppointmentDialog",
        components: { BaseDialog},
        props:["row"],
        data() {
            return {
                timeList:[],
                formData:{
                    date:undefined,
                    currTime:undefined
                },
                // 日期选择七天内,且当前时间后不能选择
                pickerOptions: {
                    disabledDate(time) {
                        let now = Date.now();
                        let seven = 5 * 24 * 60 * 60 * 1000;
                        let sevenDays = now + seven;
                        let pastday = now - (24 * 60 * 60 * 1000);
                        return  time.getTime() < pastday || time.getTime() > sevenDays;
                    }
                },

            rules: {
                    date: [{
                        required: true,
                        message: '请选择上门时间',
                        trigger: 'blur'
                    }],
                    currTime: [{
                        required: true,
                        message: '请选择上门时间段',
                        trigger: 'blur'
                    }],
                },
            }
        },
        created() {
            this.formData.date = new Date(this.row.appt_time)> new Date() ? this.row.appt_time : undefined
            this.getVenuesTimesDetail(this.row.appt_time)
        },
        methods: {
            setEndTime(val) {
                console.log('--setEndTime--',val)
            },
            formatHours(){

            },
            getVenuesTimesDetail(day){
                let hours = 8
                let date = day.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
                if(new Date(day).getDay() == new Date().getDay()){
                    hours = new Date().getHours()
                }
                if(!date ||  new Date(day).getDay() == new Date( this.row.appt_time ).getDay()  ) {
                    hours = new Date( this.row.appt_time ).getHours()
                }
                let timeArr = []
                for (var i = hours; i <= 20;  i++) {
                    var str = (i < 10) ? `0${i}` :i
                    if (i % 2 == 0) {
                        let ii = (i < 8) ? "0" + (i + 2):(i + 2)
                        let s = str + ':00' + "-" + ii + ':00'
                        timeArr.push({
                            name:s,
                            time: day,
                        })
                    }
                }
                this.timeList = timeArr

            },
            submit() {
                let val = this.formData.date + ' ' + this.formData.currTime
                this.$emit("callback",{visit_time:val})
                this.$emit("update:visible", false)

            }
        }
    }
</script>
<style lang="scss" scoped>
    .addGoods{
        padding:15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        >span{
            color: #888;
        }
    }
    .goodList{
        ::v-deep .el-input-number--mini{
            width: 100px;
            margin-right: 15px;
        }
        li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:10px 0;
            border-bottom:1px solid #eee;

        }

    }
    ::v-deep .dateRadio .el-radio.is-bordered{
        border: 1px solid #0099e0;
        background-color: #fff;
        color: #0099e0;
        margin:5px 15px 0px 5px;
    }
    ::v-deep .dateRadio .el-radio.is-bordered.is-disabled{
        border: 1px solid rgba(213,36,36,.5);
        background-color: rgba(213,36,36,.2);
    }
</style>
